<template>
    <div class="app-container">
        <el-col :span="18" :offset="3" :xs="24">
            <el-card class="Sign_agin_edit" v-if="editFlag">
                <div slot="header" class="clearfix">
                    <span> 补签申请</span>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请日期" prop="applyDate">
                                <el-date-picker clearable v-model="form.applyDate" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="请选择申请日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工" prop="partyId">
                                <el-select v-model="form.partyId" placeholder="请选择员工">
                                    <el-option v-for="dict in partyIdOptions" :key="dict.partyId" :label="dict.firstName"
                                        :value="dict.partyId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="异常记录" prop="attendanceExceptionId">
                                <el-select v-model="form.attendanceExceptionId" placeholder="请选择异常记录">
                                    <el-option v-for="dict in attendanceExceptionIdOptions" :key="dict.dailyAcountId"
                                        :label="dict.dailyAcountId" :value="dict.dailyAcountId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="上班时间" prop="workStartTime">
                                <el-date-picker clearable v-model="form.workStartTime" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="请选择上班时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="下班时间" prop="workEndTime">
                                <el-date-picker clearable v-model="form.workEndTime" type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" placeholder="请选择下班时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请原因" prop="signCause">
                                <el-select v-model="form.signCause" placeholder="请选择申请原因">
                                    <el-option v-for="dict in signCauseOptions" :key="dict.enumCode"
                                        :label="dict.description" :value="dict.enumCode"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="原因描述" prop="otherContent">
                                <el-input v-model="form.otherContent" type="textarea" placeholder="请输入内容" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批人" prop="approver">
                                <LoadPersonSelect :placeholder="'请选择审批人'" @getSelectedCourt="getSelectedApprover">
                                </LoadPersonSelect>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="Sign_agin_detail" v-if="detailFlag">
                <div slot="header" class="clearfix">
                    <span> 补签申请</span>
                    <el-button v-if="applyFlag" style="float: right; padding: 3px 0" type="text"
                        @click="edit">编辑</el-button>
                </div>
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="申请日期" prop="applyDate">
                                <span>{{ form.applyDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="员工" prop="partyId">
                                <span>{{ personFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="异常记录" prop="attendanceExceptionId">
                                <span>{{ attendanceExceptionIdFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="上班时间" prop="workStartTime">
                                <span>{{ form.workStartTime }}</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="下班时间" prop="workEndTime">
                                <span>{{ form.workEndTime }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="申请原因" prop="signCause">
                                <span>{{ signCauseFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="原因描述" prop="otherContent">
                                <span>{{ form.otherContent }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="审批人" prop="approver">
                                <span>{{ approverFormat(form) }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" v-if="applyFlag">
                            <el-form-item size="large" align="center">
                                <el-button type="primary" @click="saveForm">保 存</el-button>
                                <el-button type="primary" @click="submitForm">提 交</el-button>
                                <el-button type="danger" @click="close">关闭</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <!-- 审批组件 -->
            <approve v-if="approveFlag"></approve>
        </el-col>
    </div>
</template>

<script>
import LoadPersonSelect from "@/components/LoadPersonSelect";
// person enum api
import { getPersonEnum } from "@/api/ehr/person";
import { addSign_agin, updateSign_agin, approvalSign_agin } from "@/api/ehr/sign_agin";
import { getBusinessLog } from "@/api/busi/log";
import { getProcessVariables } from "@/api/workflow/definition";
import { getPersonAttendAddressList } from "@/api/ehr/attend_address";

// 审批组件
import Approve from "@/components/Approve";

export default {
    components: { LoadPersonSelect, Approve },
    name: "Sign_agin_apply",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 人员字典
            personOptions: [],
            // 员工业务字典
            partyIdOptions: [],
            // 异常记录业务字典
            attendanceExceptionIdOptions: [],
            // 申请原因业务字典
            signCauseOptions: [],
            // 补签状态业务字典
            signStatusIdOptions: [],
            // 补签类型:M：上午，A：下午,ALL:全天业务字典
            attendanceTypeOptions: [],
            // 流程状态业务字典
            flowStatusOptions: [],
            // 操作标识,用于区分是新增还是修改
            updateFlag: false,
            // 操作标识,用于区分是详情
            detailFlag: false,
            // 操作标识,用于区分编辑状态
            editFlag: true,
            // 业务申请标识
            applyFlag: true,
            // 业务审批标识
            approveFlag: false,

            //员工考勤地址列表
            attendAddressList: [],

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                attendanceExceptionId: [
                    { required: true, message: "异常记录不能为空", trigger: "change" }
                ],

                approver: [
                    { required: true, message: "审批人不能为空", trigger: "blur" }
                ],

            }
        };
    },
    created() {
        this.reset();

        // 为申请人默认值
        this.form.partyId = this.$store.state.user.partyId;
        // 获取员工的考勤地址列表
        this.getPersonAttendAddressList();

        // 异常记录ID
        var attendanceExceptionId = this.$route.query && this.$route.query.dailyAcountId;
        console.info("attendanceExceptionId:" + attendanceExceptionId);
        this.form.attendanceExceptionId = attendanceExceptionId
        // 为申请时间默认赋值
        this.form.applyDate = this.parseTime(
            new Date(),
            "{y}-{m}-{d} {h}:{i}:{s}"
        );

        // 人员字典
        getPersonEnum().then((response) => {
            this.personOptions = response.data;
        });
        // 员工业务字典
        this.getEntityDicts("person:partyId:firstName").then((response) => {
            this.partyIdOptions = response.data;
        });
        // 异常记录业务字典
        this.getEntityDicts("AttendanceDailyAccount:dailyAcountId:dailyAcountId").then((response) => {
            this.attendanceExceptionIdOptions = response.data;
        });
        // 申请原因业务字典
        this.getEnumDicts("SIGN_AGIN_REASON").then((response) => {
            this.signCauseOptions = response.data;
        });
        // 补签状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.signStatusIdOptions = response.data;
        });
        // 流程状态业务字典
        this.getEnumDicts("FLOW_STATUS").then((response) => {
            this.flowStatusOptions = response.data;
        });
        var procInsId = this.$route.query && this.$route.query.procInsId;
        if (procInsId) {
            this.editFlag = false;
            this.detailFlag = true;
            // 业务申请标识
            this.applyFlag = false;
            // 审批标识
            this.approveFlag = true;

            var taskId = this.$route.query && this.$route.query.taskId;
            // 获取表单参数
            this.getApproveFormParams(taskId, procInsId);
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.user; //当前登录用户信息
        },
    },
    methods: {
        //获取当前用户（登录人）的考勤地址
        getPersonAttendAddressList() {
            getPersonAttendAddressList(this.$store.state.user.partyId).then((res) => {
                console.info("res.addressList" + res.addressList)
                this.attendAddressList = res.addressList;
            });
        },
        // 获取审批表单变量
        getApproveFormParams(taskId, procInsId) {
            // 1.优先从工作流的参数中获取表单信息,流程任务重获取变量表单
            if (taskId) {
                getProcessVariables(taskId).then((res) => {
                    this.form = res.data.businessMap;
                });
            } else {
                // 2.从业务流水表获取工作流表单参数
                getBusinessLog(procInsId).then((response) => {
                    if (response.data) {
                        this.form = JSON.parse(response.data.busiContentJson);
                    }
                });
            }
        },

        // 审批人选择赋值
        getSelectedApprover(e) {
            this.form.approver = e;
        },
        // 人员字典转换
        personFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.name;
                }
            });
            return val;
        },
        // 审批人字典转换
        approverFormat(row, column) {
            let val = null;
            this.personOptions.forEach((item, index) => {
                if (row.approver === item.partyId) {
                    val = item.name;
                }
            });
            return val;
        },
        partyIdFormat(row, column) {
            let val = null;
            this.partyIdOptions.forEach((item, index) => {
                if (row.partyId === item.partyId) {
                    val = item.firstName;
                }
            });
            return val;
        },
        attendanceExceptionIdFormat(row, column) {
            let val = null;
            this.attendanceExceptionIdOptions.forEach((item, index) => {
                if (row.attendanceExceptionId === item.dailyAcountId) {
                    val = item.dailyAcountId;
                }
            });
            return val;
        },
        signCauseFormat(row, column) {
            let val = null;
            this.signCauseOptions.forEach((item, index) => {
                if (row.signCause === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        signStatusIdFormat(row, column) {
            let val = null;
            this.signStatusIdOptions.forEach((item, index) => {
                if (row.signStatusId === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },
        flowStatusFormat(row, column) {
            let val = null;
            this.flowStatusOptions.forEach((item, index) => {
                if (row.flowStatus === item.enumCode) {
                    val = item.description;
                }
            });
            return val;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                signRecordId: null,
                applyDate: null,
                partyId: null,
                attendanceExceptionId: null,
                workStartTime: null,
                workEndTime: null,
                signCause: null,
                otherContent: null,
                signSystemCause: null,
                signStatusId: null,
                attendanceRuleId: null,
                attendanceAddId: null,
                attendanceType: null,
                attendanceTimes: null,
                flowInstId: null,
                flowStatus: null,
                approver: null,
                lastUpdatedStamp: null,
                lastUpdatedTxStamp: null,
                createdStamp: null,
                createdTxStamp: null
            };
            //this.resetForm("form");
        },

        /** 保存按钮 */
        saveForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.form.signRecordId != null && this.updateFlag) {
                        updateSign_agin(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                        });
                    } else {
                        addSign_agin(this.form).then(response => {
                            this.form.signRecordId = response.data.signRecordId;
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                        });
                    }
                    this.loading = false;

                    this.editFlag = false;
                    this.detailFlag = true;
                }
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.loading = true;

                    approvalSign_agin(this.form).then((response) => {
                        this.$modal.msgSuccess("申请提交成功！");
                        this.open = false;
                    });
                    this.loading = false;

                    this.close();
                }
            });
        },

        /** 编辑 */
        edit() {
            this.editFlag = true;
            this.detailFlag = false;
        },
        resetForm() {
            this.$refs['form'].resetFields()
        },
        close() {
            this.$tab.closePage();
        },

    }
};
</script>
